<template>
	<view class="subject-detail" :style="{paddingTop: data.video == '' ? '0' : '422rpx'}">
		<!-- 视频播放器区域 -->
		<view class="video-wrapper" v-if="data.video">
			<view class="video-container">
				<video 
					:src="data.video" 
					controls
					class="video-player"
					:poster="data.cover"
					object-fit="cover"
					@error="handleVideoError"
				></video>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content-container">
			<!-- 标题区域 -->
			<view class="title-section">
				<text class="main-title">{{ data.title }}</text>
				<!-- <view class="info-row" v-if="data.video">
					<text class="duration">
						<text class="iconfont icon-shijian"></text>
						{{ data.duration || '00:00' }}
					</text>
					<text class="views">
						<text class="iconfont icon-yanjing"></text>
						{{ data.views || 0 }}次查看
					</text>
				</view> -->
			</view>
			
			<!-- 简介区域 -->
			<view class="intro-section">
				<view class="section-title">
					<text class="iconfont icon-jianjie"></text>
					<text>内容简介</text>
				</view>
				<view class="text-box">
					<mp-html :content="data.text" class="rich-content" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				isFullscreen: false
			}
		},
		
		onLoad(options) {
			this.data = uni.getStorageSync('subject_item') || {}
			uni.setNavigationBarTitle({ title: this.data.title || '详情' })
		},
		
		onPageScroll(e) {
			// 可以在这里添加滚动效果，比如视频缩小等
		},
		
		methods: {
			handleVideoError(err) {
				console.error('视频播放错误:', err)
				uni.showToast({
					title: '视频加载失败',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.subject-detail {
		min-height: 100vh;
		background: #F5F5F5;
		// padding-top: 422rpx;
		
		.video-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
			background: #000;
		}
		
		.video-container {
			width: 100%;
			height: 422rpx;
			background: #000;
			
			.video-player {
				width: 100%;
				height: 100%;
			}
		}
		
		.content-container {
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			position: relative;
			z-index: 1;
			min-height: calc(100vh - 422rpx - 30rpx);
			
			.title-section {
				margin-bottom: 30rpx;
				
				.main-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					line-height: 1.4;
					margin-bottom: 16rpx;
				}
				
				.info-row {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					
					.duration, .views {
						display: flex;
						align-items: center;
						margin-right: 30rpx;
						
						.iconfont {
							font-size: 28rpx;
							margin-right: 6rpx;
						}
					}
				}
			}
			
			.intro-section {
				.section-title {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-weight: 500;
					color: #333;
					margin-bottom: 20rpx;
					
					.iconfont {
						font-size: 32rpx;
						margin-right: 8rpx;
						color: #FD3523;
					}
				}
				
				.text-box {
					background: #F8F8F8;
					border-radius: 12rpx;
					
					.rich-content {
						font-size: 28rpx;
						line-height: 1.6;
						color: #666;
					}
					img{
						width: 100%;
					}
				}
			}
		}
	}
</style>
